<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue Basics</title>
		<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
		<link rel="stylesheet" href="styles.css" />
		<script src="app.js" defer></script>
	</head>

	<body>
		<section id="assignment">
			<!-- 1) Output your name -->
			<h2>{{ name }}</h2>
			<!-- 2) Output your age -->
			<p>Age: {{ age }}</p>
			<!-- 3) Output your age + 5 -->
			<p>Age in 5 years: {{ calculateAge() }}</p>
			<!-- 4) Output a random number (0 to 1) -->
			<p>Favorite Number: {{ favNumber() }}</p>

			<div>
				<!-- 5) Display some image you found via Google -->
				<img :src="stockPhoto" width='300' />
			</div>
			<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
			<input type="text" v-model='name' />

		</section>


		<script src="https://unpkg.com/vue@next"></script>
	</body>

</html>